<template>
  <div class="User-list wh-100">
    <div class="user-list-container">
      <el-button type="primary" class="xin">新增</el-button>
      <el-input
        v-model="input2"
        class="w-50 m-2 input"
        placeholder="请输入..."
        :prefix-icon="Search"
      />
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="姓名" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <!-- <el-icon><timer /></el-icon> -->
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="年龄" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <!-- <el-icon><timer /></el-icon> -->
              <span style="margin-left: 10px">{{ scope.row.age }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="年龄" width="180">
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="hover"
              placement="top"
              width="auto"
            >
              <template #default>
                <div>name: {{ scope.row.age }}</div>
                <div>address: {{ scope.row.sex }}</div>
              </template>
              <template #reference>
                <el-tag>{{ scope.row.age }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column> -->

        <el-table-column label="性别" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <!-- <el-icon><timer /></el-icon> -->
              <span style="margin-left: 10px">{{ scope.row.sex }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="出生日期" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <!-- <el-icon><timer /></el-icon> -->
              <span style="margin-left: 10px">{{ scope.row.data }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="地址" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <!-- <el-icon><timer /></el-icon> -->
              <span style="margin-left: 10px">{{ scope.row.addres }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "user-list",
  components: {},
  setup() {
    const handleEdit = (index, row) => {
      console.log(index, row);
    };
    const handleDelete = (index, row) => {
      console.log(index, row);
    };

    const tableData = [
      {
        name: "张三",
        age: "13",
        sex: "男",
        data: "2012-03-22",
        addres: "山东省",
      },
      {
        name: "张三",
        age: "13",
        sex: "男",
        data: "2012-03-22",
        addres: "山东省",
      },
      {
        name: "张三",
        age: "13",
        sex: "男",
        data: "2012-03-22",
        addres: "山东省",
      },
    ];
    return {
      handleEdit,
      handleDelete,
      tableData,
    };
  },
};
</script>

<style scoped lang="scss">
.User-list {
  background-color: #ccc;
  .user-list-container {
    background-color: white;
    width: 100%;
    height: 100%;
  }
  .xin {
    margin-left: 10px;
    margin-top: 30px;
  }
  .input {
    width: 180px;
    float: right;
    margin-top: 40px;
    margin-right: 200px;
  }
}
</style>
